<template>
    <div id="home">
      <div class="nav clear" id="nav" @mouseleave="nowIndex=nowIndex">
            <ul>
          <li @click.stop="nowIndex=index" v-for="(item,index) in navList"><span>{{item}}</span></li>
        </ul>
        <div class="slider" :style="{'transform':'translate3d('+nowIndex*100+'px,0,0)'}"></div>
      </div>
    </div>
</template>
<script>
  import TabBar from 'src/components/common/TabBar.vue'
  import HeaderBar from 'src/components/common/headerBar.vue'
  import {Scroller} from 'vux'
  import Sticky from 'vue-sticky-position';
  export default{
    components:{TabBar,HeaderBar,Scroller,Sticky},
    data(){
      return{
        title:'首页',
        activeIndex:0,
        navList:['全部','服装穿搭','生活百货','美食吃货','美容护理','母婴儿童','数码家电'],
        currentIndex:0,
        navWidth:'',
        itemWidth:94.5,
        windowWidth:'',
        maxSildeWidth:'',
        slideWidth:'',
        nowIndex:0,
      }
    },
    mounted(){

    },
    methods:{

    }

  }
</script>
<style lang="less" scoped>
  .nav{
    position: relative;
  }
  .nav li{
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background: #09f;
    cursor: pointer;
  }
  .nav span{
    position: relative;
    z-index: 2;
  }
  .nav .slider{
    position: absolute;
    transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38);
    width: 100px;
    height: 40px;
    background: #f90;
    top: 0;
    left: 0;
    z-index: 1;
  }
</style>
